<template>
    <!--index.wxml-->
    <view class="allPage">
        <view class="content">

            <!-- <view class="status">
                <text class="b"> {{json.orderStatusStr || ''  }}</text>
            </view> -->

            <view class="parts">
                <view class="head-box">
                    <view class="left">
                        <text class="t-name">
                            你对订单满意吗？
                        </text>
                    </view>
                    <view class="right">
                        <label class="radio">
                            <checkbox-group  @change="handleChange">
                                <checkbox color="#ff8000" style="transform:scale(0.8)" :value="1" :checked="commentAnonymousOrNot"/>匿名提交
                            </checkbox-group>
                        </label>

                    </view>
                </view>

                <view class="marekt">

                    <view class="marketInfo">

                        <image class="imgBox" :src="$getImg( orderGoodsModelJson.goodsPic )" mode="aspectFit" lazy-load="false" />

                        <view class="info-right">
                            <view class="market-name">
                                {{ orderGoodsModelJson.goodsName }}
                                <text class="f22 col-hui ,ml5">    x {{ orderGoodsModelJson.goodsNum }}</text>
                            </view>
                            <!-- <view class="market-addr">
                            
                            </view> -->
                        </view>

                    </view>

                </view>

                <view class="eval">
                    <view class="eva-i big">
                        <text class="left ">
                            总体
                        </text>
                        <view class="right ml5">
                            <uni-rate v-model="commentOverallRating" :size="32" :margin="6" @change="rateChange('commentOverallRating')" />
                            <span>{{commentOverallRatingStr}}</span>
                        </view>

                    </view>
                    <div class="other">
                        <view class="eva-i">
                            <text class="left">
                                口味
                            </text>
                            <view class="right">
                                <uni-rate v-model="commentTasteRating" :margin="15" @change="rateChange('commentTasteRating')" />
                                <span>{{commentTasteRatingStr}}</span>
                            </view>

                        </view>
                        <view class="eva-i">
                            <text class="left">
                                分量
                            </text>
                            <view class="right">
                                <uni-rate v-model="commentWeightRating" :margin="15" @change="rateChange('commentWeightRating')" />
                                <span>{{commentWeightRatingStr}}</span>
                            </view>

                        </view>
                        <view class="eva-i">
                            <text class="left">
                                包装
                            </text>
                            <view class="right">
                                <uni-rate v-model="commentPackageRating" :margin="15" @change="rateChange('commentPackageRating')" />
                                <span>{{commentPackageRatingStr}}</span>
                            </view>

                        </view>

                        <view class="iptBox">
                            <textarea class="textArea" placeholder-style="color:#888" placeholder="请输入..." v-model="commentContent" maxlength="300"></textarea>

                            <view>
                                <uni-file-picker v-model="imageValue" ref="files" fileMediatype="image" :image-styles="imageStyles" limit="5" mode="grid" @select="select" @progress="progress" @success="success" @fail="fail">
                                    
                                    <view class="text-center col-hui">
                                        <uni-icons type="camera" size="30"></uni-icons>
                                        <view>
                                            添加图片
                                        </view>
                                          
                                    </view>
                                      
                                </uni-file-picker>   

                            </view>

                        </view>

                    </div>

                </view>

                <!--                   
                <view class="line">
                   
                    <view class="l">
                        <text class="b">送货人</text>
                    </view>
                    <view class="r none">
                        <text>{{ json.dispatcherUser.mobile}}</text>
                        <text v-if="json.dispatcherId" @click="$takePhone(json.dispatcherUser.mobile)" class="iconfont icon-dianhua col-green ml10 f36"></text>
                    </view>
                </view>
                <view class="line">
                    <view class="l">
                        <text class="b">预定时间</text>
                    </view>
                    <view class="r none">
                        <text class="col">{{appointDate}}</text>
                    </view>
                </view> -->
                <!-- <view class="sendAddress">
                  
                    <view class="">
                        <text class="">{{json.placeOrderUser.roomNumber}}</text>
                    </view>
                    <text>{{json.villageModel.name}} (<text class="col-hui">{{json.villageModel.address}}</text>)</text>
                
                </view>  -->
            </view>

        </view>

        <view class="commonFoot">
            <view class="foot-btn-box fixed">
                <view class="foot-btn" @click="goSubmit" >
                    <text>提交评价</text>
                </view>
              
            </view>
        </view>

    </view>
</template>
<script>
import { statusList, DealOrderInfo } from '../../../utils/configDIct.js'
import { parseTime } from '../../../utils/tools'
const app = getApp();
import uniBadge from "@/components/uni-rate/uni-rate.vue"
import uniFilePicker from "@/components/uni-file-picker/uni-file-picker.vue"
import {uploadFuncMulti} from '@/api'
export default {
    components: { uniBadge, uniFilePicker },
    data () {
        return {
            orderId: '',
            json: {
                placeOrderUser: {},
                orderGoodsModelList: [],
                dispatcherUser: {},
                villageModel: {},
                flashSupermarketModel: {}
            },

            orderGoodsModelJson:{},

            statusList: statusList,
            appointDate: '',
            //是否匿名
            commentAnonymousOrNot: 0,
            commentOverallRating: 0,
            commentTasteRating: 0,
            commentWeightRating: 0,
            commentPackageRating: 0,
            commentOverallRatingStr: '',
            commentTasteRatingStr: '',
            commentWeightRatingStr: '',
            commentPackageRatingStr: '',
            //
            commentContent: undefined,
            //上次插件
            imageValue: [],
            imgFilesId:[],
            imageStyles:{
				width:100,
				height:100,
				border:{
					color:"#999",
					width:1,
					style:'dashed',
					radius:'2px'
				}
			},

        }
    },
    computed: {

    },

    onLoad (option) {
        // console.log('999999999999999',this.wechatInfo)
        this.orderId = option.id || '1701062094893735939'
        this.initPage()

        app.laterToken(bool => {

            app.logRecord('菜品评价')

        })

    },
    mounted () {

    },
    methods: {
        initPage (cb) {

            this.$axios({ url: 'flash/supermarket/order/get?loading', data: this.orderId })
                .then(res => {

                    this.json = DealOrderInfo([res.data], this.statusList)[0]

                    this.orderGoodsModelJson =  res.data.orderGoodsModelList[0]
           
                    cb && cb()

                })

        },
       
        //下拉刷新
        // onPullDownRefresh () {

        //     this.initPage(()=>{
        //         uni.stopPullDownRefresh();//停止刷新
        //     })

        // },
        goSave () {

        },
        handleChange( e ){

            // console.log('咋回事',e)

            this.commentAnonymousOrNot = e.detail.value && e.detail.value.length > 0 ? 1 : 0 
        },
        rateChange (key) {

            // console.log('99999999999' , key , this[key])

            let num = this[key]
            let str = ''

            switch (num) {
                case 1: str = '非常差'; break;
                case 2: str = '差'; break;
                case 3: str = '一般'; break;
                case 4: str = '满意'; break;
                case 5: str = '非常满意'; break;
            }

            if (key == 'commentOverallRating' && num == 5) {

                this.commentTasteRating = 5
                this.commentWeightRating = 5
                this.commentPackageRating = 5

                this.commentTasteRatingStr = '非常满意'
                this.commentWeightRatingStr = '非常满意'
                this.commentPackageRatingStr = '非常满意'
            }

            // console.log('99999999999' , key , this[key] , str)

            this[key + 'Str'] = str

        },
        // 获取上传状态
        select (e) {
            console.log('选择文件：', e)
        },
        // 获取上传进度
        progress (e) {
            console.log('上传进度：', e)
        },

        // 上传成功
        success (e) {
            console.log('上传成功')
        },

        // 上传失败
        fail (e) {
            console.log('上传失败：', e)
        },
        goSubmit(){

            if(this.commentOverallRating == 0){

                uni.showToast({
                    title: '请先打分',
                    icon: 'none'
                });

                return

            }


            let files = this.$refs['files'].files

            let paramsObj = {
                "commentAnonymousOrNot": this.commentAnonymousOrNot ,//是否匿名 1是 0否
                "commentIfPicture": 0, //是否图片评价 1是 0否
                'commentPicture':undefined,
                "commentOverallRating": this.commentOverallRating, //总体打分 1~5分
                "commentPackageRating": this.commentPackageRating, //包装打分 1~5分
                "commentTasteRating": this.commentTasteRating, //口味打分 1~5分
                "commentWeightRating": this.commentWeightRating, //份量打分 1~5分
                "goodsId": this.orderGoodsModelJson.goodsId,
                "supermarketId": app.globalData.supermarketId,
                "orderId": this.orderId,
                'commentContent':this.commentContent,
                'comment_type':1 //评价类型 1外卖评价 2到店评价
            }

            uni.showLoading()

            if( files && files.length > 0){

                paramsObj.commentIfPicture = 1

                this.uploadMoreFunc( this.$refs['files'].files ,( ids )=>{

                    paramsObj.commentPicture = ids.join(',')

                    this.lastSubmit( paramsObj )
                    
                })
            }
            else{

                this.lastSubmit( paramsObj )
            }

        },
        //最后的提交
        lastSubmit( paramsObj){
            this.$axios({url:'flash/supermarket/goods/comment/save',data:[ paramsObj ] })
                .then( res =>{

                    // console.log('添加成功了..............')
                    uni.hideLoading()

                    uni.showToast({
                        title: '评论成功！',
                    })
                    
                    setTimeout(()=>{
                        uni.navigateBack();
                    },1000)

                  

                })

        },
        //上传 
        uploadMoreFunc(filePath ,cb  ){
       

            let that = this

            uploadFuncMulti('',filePath.map( i=> i.path ))
            .then( res =>{

                    // that.imgFilesId.push( res.id )

                    cb && cb(  res.map( i => i.id) )

                })
                .catch(res =>{
                    console.log('上传失败了',res)
                })

        },

    }
}
</script>
<style lang="scss" scoped>
.content {
    padding: 30rpx 32rpx;
    .parts {
        padding: 30rpx 30rpx 30rpx;
    }
    .status {
        min-height: 52rpx;
        font-size: 40rpx;
        margin-bottom: 30rpx;
    }
    .head-box {
        overflow: hidden;
        margin-bottom: 40rpx;
        .left {
            float: left;
            font-weight: bold;
            color: #000;
            font-size: 38rpx;
        }
        .right {
            float: right;
            color: #666;
            font-size: 26rpx;
            .radio {
                display: flex;
                align-items: center;
            }
        }
    }
    .line {
        color: #565656;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10rpx 0;
        .l {
            text-align: left;
            margin-left: 10px;
            max-width: 500rpx;
            min-width: 160rpx;
        }
        .r {
            flex: 1;
            width: 100%;
            // border-bottom: 1rpx solid #f1f1f1;
            // padding-bottom: 20rpx;
            &.none {
                border: none;
            }
        }
        .b {
            // font-weight: bold;
        }
        .min {
            font-size: 24rpx;
        }
        ::v-deep .holderClass {
            color: #c1c1c1;
        }
        .icon {
            color: #c1c1c1;
            font-size: 24rpx;
            line-height: 38rpx;
        }
        .address {
            font-size: 22rpx;
            color: #565656;
        }
    }
    .sendAddress {
        font-size: 24rpx;
        color: #000;
        padding-top: 30rpx;
        margin-top: 30rpx;
        border-top: 1rpx solid #f6f6f6;
        line-height: 1.5;
    }
    .priceBox {
        padding: 0 32rpx 10rpx;
        font-size: 34rpx;
        .min {
            font-size: 24rpx;
        }
    }
}

.marekt {
    .marketInfo {
        display: flex;
        margin-bottom: 30rpx;
        .imgBox {
            width: 110rpx;
            height: 110rpx;
            background: #f6f6f6;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }
        .info-right {
            padding-top: 10rpx;
            flex: 1;
            .market-name {
                font-size: 34rpx;
                color: #222;
                margin-bottom: 10rpx;
            }
            .market-addr {
                font-size: 24rpx;
                color: #888;
            }
        }
    }
}
.eva-i {
    display: flex;
    align-items: center;
    padding: 20rpx 0rpx;
    font-size: 24rpx;
    color: #888;

    &.big {
        font-size: 30rpx;
        color: #333;
    }
    .left {
        width: 100rpx;
    }
    .right {
        flex: 1;
        display: flex;
        align-items: center;
    }
}
.iptBox {
    background: rgb(250, 250, 250);
    border-radius: 6rpx;
    // height: 300rpx;
    padding: 32rpx;
    .textArea{
        height: 150rpx;
        width: 100%;
    }
}
</style>